<script type="text/html" template>
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/reset.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/home/list.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/page.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/autoComplete.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/patrol/project_device_alert.css">
</script>
<style scoped>
    .layui-table th {
        font-size: 10px;
        color: #333333;
        text-align: center;
        padding: 0;
        font-weight: bold;
        line-height: 2.6rem;
        border: 0;
        background-color: #CCDAE3;
        height: 26px;
        line-height: 26px;
        padding: 9px 0 8px;
    }

    .layui-table td {
        border: 0;
        font-size: 9px;
        color: #666666;
        text-align: center;
        height: 25px;
        line-height: 25px;
        padding: 10px 0 7px;
    }

    tbody tr:nth-child(even) {
        background-color: #CCDAE3;
    }

    .layui-form-label {
        padding: 0;
    }

    .layui-form-item {
        margin: 0;
    }

    .layui-input-block {
        min-height: 0;
        margin: 0;
        display: inline-block;
    }

    .layui-form-label {
        margin-right: 3px;
    }

    .layui-form-label,
    .layui-input {
        width: auto;
        height: 26px;
        line-height: 26px;
        font-size: 10px;
        color: #616161;
    }

    .layui-input {
        width: 90px;
    }

    .layui-btn-container .layui-btn {
        margin: 0;
    }

    .box {
        padding: 28px 27px 0 30px;
    }

    .add-btn {
        display: flex;
        justify-content: center;
        width: 69px;
        height: 23px;
        line-height: 23px;
        padding: 0;
        border: 0;
        font-size: 9px;
        color: #666666;
        background-color: #CCDAE3;
        text-align: center;
        margin: 0;
    }
    .mybutton{
        display: inline-block;
        height: 20px;
        line-height: 20px;
        font-size: 9px;
        color: #FFF;
        position: relative;
        background-color: #4C96CF;
        border: 0;
        padding: 0;
        margin-right: 15px;
        margin-top: 20px;
        padding: 0 5px;
    }
    .search-btn {
        display: flex;
        justify-content: center;
        width: 50px;
        height: 20px;
        line-height: 20px;
        font-size: 9px;
        color: #FFF;
        background-color: #4C96CF;
        border: 0;
        padding: 0;
    }

    .form {
        display: flex;
        justify-content: flex-start;
        flex-flow: row nowrap;
        align-items: center;
        align-content: flex-start;
        background: #FFF;
        padding-top: 14px;
        padding: 13px;
        margin-top: 11px;
        margin-bottom: 11px;
        margin-left: 16px;
        margin-right: 15px;
    }
</style>
<form class="form layui-form layui-col-sm14 layui-col-md14" lay-filter="app-content-comment">
    <div class="layui-form-item layui-col-sm2 layui-col-md2">
        <label class="layui-form-label">设备编号:</label>
        <div class="layui-input-block layui-col-space14">
            <input type="text" name="fia01" autocomplete="off" class="layui-input" />
        </div>
    </div>
    <div class="layui-form-item layui-col-sm2 layui-col-md2">
        <label class="layui-form-label">供应商：</label>
        <div class="layui-input-block">
            <input type="text" name="fia09" autocomplete="off" class="layui-input " id="Number2" />
        </div>
    </div>
    <div class="layui-form-item layui-col-sm2 layui-col-md2 ">
        <label class="layui-form-label ">设备系列：</label>
        <div class="layui-input-block ">
            <select name="fia04" id="selectThree">
                <option value=""></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item layui-col-sm2 layui-col-md2">
        <label class="layui-form-label">设备型号：</label>
        <div class="layui-input-block completeWrap">
            <input name="fia05" id="fia05" value="" autocomplete="off" class="layui-input" />
        </div>
    </div>
    <div class="layui-btn-container layui-col-sm2 layui-col-md2">
        <button class="search-btn layui-btn layui-btn-radius layui-btn-primary" lay-submit lay-filter="query">
            <i class="layui-icon layui-icon-search" style="font-size: 10px; color: #FFF;"></i>
            <span>查询</span>
        </button>
    </div>
</form>

<!-- 表格区域 -->
<div class="layui-fluid">
    <div class="layui-row ">
        <div class="layui-col-md12 layui-col-xs12 layui-col-sm12 ">
            <table class="InputInfoTable layui-table" id="FormData" lay-filter="FormData">

            </table>
        </div>
    </div>
    <button class="mybutton layui-btn layui-btn-radius layui-btn-normal" id="upload">导入设备信息</button>
    <button class="mybutton layui-btn layui-btn-radius layui-btn-normal"  id="download">下载模板</button>
</div>
<!-- 供应商 -->
<script type="text/html" id="addDeviceTpl">
    <style scoped>
        .leon-style-alert .layui-table-page,.layui-table-page .layui-laypage input{
                background-color:transparent;   
           }
           .leon-style-alert .layui-table-view {
             border-width: 1px;
             border-style: solid;
             border-color: #e6e6e6;
         }
     </style>
<div class="leon-style-alert">
  <div class="layui-alert-box">
    <div class="layui-alert-title">
      <span class="layui-title-inner">供应商</span>
    </div>
    <div class="layui-content">
      <div class="con1 toggle-btn">
        <span class="screen">
          <i class="query-icon  layui-icon"></i>
          <span class="query-inner">查询条件</span>
        </span>
        <i class="icon layui-icon layui-icon-down"></i>
      </div>
      <div class="con2 toggle-content">
        <form action="" class="layui-form">
          <label for="">供应商:</label>
          <input type="text" name="pmc081" />
          <button type="button" lay-submit lay-filter="queryTableDevice"
            class="query layui-btn layui-btn-radius layui-btn-primary">
            <span class="search-icon"></span>
            <span class="btn-inner">查询</span>
          </button>
        </form>
      </div>
      <table class="layui-table" id="table-device-alert" style="margin-top:20px;"></table>
    </div>
    <div class="footer layui-btn-containner" style="margin-top:20px;">
      <button class="btn1 layui-btn layui-btn-radius layui-btn-primary">确定</button>
      <button class="btn2 layui-btn layui-btn-radius layui-btn-primary">取消</button>
    </div>
  </div>
</div>
</script>

<script>
    layui.use(['admin', 'form', 'user', 'table', 'api', 'laytpl', 'utill', 'laydate', 'jquery','upload'], function () {
        var $ = layui.$,
            admin = layui.admin,
            view = layui.view,
            api = layui.api,
            table = layui.table,
            setter = layui.setter,
            laytpl = layui.laytpl,
            utill = layui.utill,
            laydate = layui.laydate,
            form = layui.form,
            upload = layui.upload;      
        var token = JSON.parse(sessionStorage.getItem('ipay-merchant')).token;
        form.render(null, 'app-content-comment');
        // 列定制
        utill.columnCustom('#FormData', "InputFiaFileListVO", {
            url: api.host + api.inputFiaFileList_llp,
            skin: 'nob',
            where: {
                fia01: "",
                fia09: "",
                fia04: "",
                fia05: ""
            },
            checkbox: false
        });
        $('#download').click(function(){
            window.open(
                api.host + api.daochu + '?token=' + token
            );
        })
        upload.render({
            elem: '#upload',
            headers: {
                token:token
            },
            multiple: true,
            method: 'POST'
            ,url: api.host + api.daoru
            ,accept: 'file'
            ,done: function(res){
                layer.msg(res.message);
                if(res.code == 0){
                    table.reload('#FormData');
                }
            }
        })

        // 页面跳转升级版
        table.on('tool(FormData)', function (obj) {
            var data = obj.data;
            if (obj.event == 'detail') {
                location.hash = '/home/my_home/equipmentInfo/tcApplyFia01=' + obj.data.tcApplyFia01;
                var href = '[data-jump="home/cash"]';
                sessionStorage.setItem('layui-this', JSON.stringify(href));
            }
        })
        // 高查部门
        form.on('submit(query)', function (data) {
            var allData = data.field;
            table.reload('#FormData', {
                where: allData,
                page: {
                    curr: 1
                }
            })
            return false;
        })
        // 供应商
        $("#Number2").click(function () {
            layer.open({
                type: 1,
                title: false,
                area: ["665px", "536px"],
                fixed: true,
                shadeClose: true,
                closeBtn: 0,
                content: $("#addDeviceTpl").html(),
                success: active.addRoleAlert
            });   
        })
        // 设备系列
        admin.req({
            type: "post",
            url: api.host + api.selectFiaSeriesId,
            success: function (data) {
                var datasOne = data.data;
                var code = data.code;
                if (code == 0 || datasOne != null) {
                    var _list = '';
                    datasOne.forEach((item) => {
                        _list += `<option value="${item.tcSeriesId}">${item.tcSeriesName}</option>`
                    })
                    $("#selectThree").append(_list);
                    form.render();
                };
            }
        });
        // 设备型号
        utill.fuzzmatch('#fia05', {
            isShowValue: false,
            reqObj: {
                url: api.host + api.selectFiaFii02,
                type: 'POST'
            },
            dataTrans: function (res) {
                return res.data.map((item) => {
                    return {
                        label: item.fii02,
                        value: item.fii02,
                        data: item
                    }
                })
            }
        });
        // 供应商
        var active = {
        addRoleAlert: function (layero, index) {
           table.render(
                $.extend({}, utill.tableOpts(), {
                elem: "#table-device-alert",
                id: "#table-device-alert",
                height: 300,
                toolbar: "",
                url: api.host + api.selectFiaPmc01,
                type: 'post',
                cols: [
                        [
                        { fixed: "left", type: "radio" },
                        { field: "pmc081", title: "供应商" },
                        ]
                      ]
                })
           );
           $('.leon-style-alert .con1').click(function(){
              $('.con2').toggle();
           })
           form.on("submit(queryTableDevice)", function (data) {
                    var allData = data.field;
                    table.reload("#table-device-alert", {
                    where: allData
                    });
                    return false;
            });
            // 确定按钮
            $(".btn1").click(function(){
                tableArray = table.checkStatus("#table-device-alert").data;
                var pmc01 = tableArray[0].pmc01;
                var pmc081 = tableArray[0].pmc081;
                $("#Number2").val(pmc081);
                layer.close(index);
            })
            // 取消
            $(".btn2").click(function(){
                 layer.closeAll();
            })
        }
       }
    });
</script>